 <!-- #docregion -->
<div class="container">

  <h2>Reactive Form</h2>

  <form [formGroup]="heroForm" #formDir="ngForm">

    <div [hidden]="formDir.submitted">

      <div class="cross-validation" [class.cross-validation-error]="heroForm.errors?.['identityRevealed'] && (heroForm.touched || heroForm.dirty)">
        <div class="form-group">

          <label for="name">Name</label>
          <!-- #docregion name-with-error-msg -->
          <input type="text" id="name" class="form-control"
                formControlName="name" required>

          <div *ngIf="name.invalid && (name.dirty || name.touched)"
              class="alert alert-danger">

            <div *ngIf="name.errors?.['required']">
              Name is required.
            </div>
            <div *ngIf="name.errors?.['minlength']">
              Name must be at least 4 characters long.
            </div>
            <div *ngIf="name.errors?.['forbiddenName']">
              Name cannot be Bob.
            </div>
          </div>
          <!-- #enddocregion name-with-error-msg -->
        </div>

        <div class="form-group">
          <label for="alterEgo">Alter Ego</label>
          <input type="text" id="alterEgo" class="form-control"
              formControlName="alterEgo">

          <div *ngIf="alterEgo.pending">Validating...</div>
          <div *ngIf="alterEgo.invalid" class="alert alert-danger alter-ego-errors">
            <div *ngIf="alterEgo.errors?.['uniqueAlterEgo']">
              Alter ego is already taken.
            </div>
          </div>
        </div>

        <!-- #docregion cross-validation-error-message -->
        <div *ngIf="heroForm.errors?.['identityRevealed'] && (heroForm.touched || heroForm.dirty)" class="cross-validation-error-message alert alert-danger">
            Name cannot match alter ego.
        </div>
        <!-- #enddocregion cross-validation-error-message -->
      </div>

      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" class="form-control"
            formControlName="power" required>
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>

        <div *ngIf="power.invalid && power.touched" class="alert alert-danger">
          <div *ngIf="power.errors?.['required']">Power is required.</div>
        </div>
      </div>

      <p>Complete the form to enable the Submit button.</p>
      <button type="submit"
              class="btn btn-default"
              [disabled]="heroForm.invalid">Submit</button>
      <button type="button" class="btn btn-default"
             (click)="formDir.resetForm({})">Reset</button>
    </div>
  </form>

  <div class="submitted-message" *ngIf="formDir.submitted">
    <p>You've submitted your hero, {{ heroForm.value.name }}!</p>
    <button type="button" (click)="formDir.resetForm({})">Add new hero</button>
  </div>
</div>
